<template>
  <div>
    <!-- 导航 -->
    <van-nav-bar title="登录" />
    <!-- 表单 -->
    <van-form @submit="onSubmit" class="form" ref="form">
      <van-field
        v-model="mobile"
        name="mobile"
        placeholder="请输入手机号"
        :rules="mobileRules"
      >
        <!-- 左边图标插槽 -->
        <template #label>
          <span class="toutiao toutiao-shouji1"></span>
        </template>
      </van-field>

      <van-field
        v-model="code"
        name="code"
        placeholder="请输入验证码"
        :rules="codeRules"
      >
        <!-- 左边图标插槽 -->
        <template #label>
          <span class="toutiao toutiao-yanzhengma"></span>
        </template>
        <!-- 右边按钮插槽 -->
        <template #button>
          <van-button
            round
            size="mini"
            class="code-btn"
            v-if="isShowCode"
            native-type="button"
            @click="sendCode"
            >获取验证码</van-button
          >
          <van-count-down
            :time="3 * 1000"
            format="ss秒"
            v-else
            @finish="isShowCode = true"
          />
        </template>
      </van-field>
      <div style="margin: 0.42rem">
        <van-button block type="info" native-type="submit">登录</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { mobileRules, codeRules } from './rules'
import { login, getCodeAPI } from '@/api'

export default {
  name: 'Login',
  data() {
    return {
      mobile: '',
      code: '',
      mobileRules,
      codeRules,
      isShowCode: true
    }
  },
  methods: {
    loading() {
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true
      })
    },
    async onSubmit(values) {
      // 返回的是手机号和验证码的对象
      try {
        this.loading()
        const {
          data: { data: token }
        } = await login(values)
        // console.log(data);
        // 保存token
        this.$store.commit('SET_TOKEN', token)
        // 跳转
        this.$router.push('/my')
        this.$toast.success('登录成功')
      } catch (e) {
        // 不同错误的提示
        // console.log(e);
        const {
          response: { status }
        } = e
        let message = '请刷新'
        // console.log(status);
        if (status === 400) {
          message = e.response.data.message
        }
        this.$toast.fail(message)
      }
    },
    sendCode() {
      // 1.验证手机号
      this.$refs.form.validate('mobile').then(async () => {
        // loading效果
        this.loading()
        try {
          // 2.验证成功后发送请求
          // 连续解构
          await getCodeAPI(this.mobile)
          this.$toast.success('登录成功')

          // 3.发完请求倒计时
          this.isShowCode = false
        } catch (err) {
          // 错误信息提示
          const message = err.response.data.message
          this.$toast.fail(message)
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.van-nav-bar {
  background: #3196fa;
  // 穿透类名
  :deep(.van-nav-bar__title) {
    color: #fff;
  }
}
.toutiao {
  font-size: 40px;
}
// 给父级穿透样式  子类全部生效
:deep(.form) {
  .van-field__label {
    flex: 1;
  }
  .van-cell__value {
    flex: 20;
  }
}
// &表示当前父级的类名   并用为交集选择器
:deep(.code-btn) {
  &.van-button--default {
    background-color: #eeeeee;
    color: #917b66;
  }
  &.van-button--mini {
    padding: 0 0.2rem;
  }
}
</style>
